<script setup lang="ts">
const props = defineProps<{ imgSrc: string, title: string, subtitle: string }>()
const { imgSrc, title, subtitle } = props
</script>

<template>
  <div :style="{ backgroundImage: imgSrc }" class="common-banner-container">
    <div class="common-title">
      {{ title }}
    </div>
    <div class="common-subtitle">
      {{ subtitle }}
    </div>
  </div>
</template>

<style type="postcss" scoped>
.common-banner-container {
  height: 400px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  .common-title {
    margin: 70px auto 14px;
    font-size: 46px;
    line-height: 46px;
    color: #fff;
  }
  .common-subtitle {
    margin: 14px auto auto;
    font-size: 42px;
    line-height: 42px;
    color: rgba(255, 255, 255, 0.2);
  }
}
</style>
